import globals from 'globals';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import prettier from 'eslint-plugin-prettier';
import prettierConfig from 'eslint-config-prettier';
import vueParser from 'vue-eslint-parser';
import { defineConfig } from '@eslint/config';

export default defineConfig([
   // 第一个配置对象：定义全局设置，适用于所有指定文件
  {
    // 指定适用的文件类型：包括 JavaScript、TypeScript 和 Vue 文件
    files: ['**/*.{js,mjs,cjs,ts,mts,cts,vue}'],
    // 语言选项，定义代码的运行环境和解析规则
    languageOptions: {
      // 定义全局变量，合并 browser（浏览器）、node（Node.js）和 es2021（ES2021 特性）的全局变量
      // 例如，browser 提供 window、document，node 提供 process、require
      globals: { ...globals.browser, ...globals.node, ...globals.es2021 },
      // 使用最新的 ECMAScript 版本（如 ES2022+）解析代码
      ecmaVersion: 'latest',
      // 指定代码使用 ES 模块（import/export）而不是 CommonJS（require/exports）
      sourceType: 'module',
    },
  },
  // 第二个配置对象：专门针对 Vue 文件的解析设置
  {
    // 仅适用于 .vue 文件
    files: ['**/*.vue'],
    // 语言选项，定义 Vue 文件的解析规则
    languageOptions: {
      // 使用 vue-eslint-parser 解析器，先解析 <template>，再解析 <script>
      parser: vueParser,
      // 解析器选项
      parserOptions: {
        // 使用 typescript-eslint 的解析器来解析 Vue <script> 中的 TypeScript 代码
        parser: tseslint.parser,
        // 确保 <script> 使用 ES 模块
        sourceType: 'module',
        // 使用最新的 ECMAScript 版本
        ecmaVersion: 'latest',
      },
    },
  },
  // 扩展 typescript-eslint 的推荐规则集
  // tseslint.configs.recommended 是一个规则数组，包含 TypeScript 最佳实践
  // 例如，禁止未使用的变量、强制类型注解等
  ...tseslint.configs.recommended,
  // 扩展 eslint-plugin-vue 的 Vue 3 推荐规则集（Flat Config 格式）
  // pluginVue.configs['flat/vue3-recommended'] 包含 Vue 3 的最佳实践
  // 例如，强制组件命名、v-for 必须有 key 等
  ...pluginVue.configs['flat/vue3-recommended'],
  // 应用 eslint-config-prettier，禁用与 Prettier 冲突的 ESLint 规则
  // 例如，禁用 ESLint 的缩进规则，让 Prettier 接管格式化
  prettierConfig,
  // 最后一个配置对象：定义插件和自定义规则
  {
    // 注册使用的 ESLint 插件
    plugins: {
      // 注册 vue 插件，支持 Vue 特定的 linting 规则
      vue: pluginVue,
      // 注册 typescript-eslint 插件，支持 TypeScript 特定的规则
      '@typescript-eslint': tseslint.plugin,
      // 注册 prettier 插件，将 Prettier 格式化规则作为 ESLint 规则
      prettier,
    },
    // 自定义规则，覆盖或新增 linting 规则
    rules: {
      // 关闭 TypeScript 未使用变量的检查
      '@typescript-eslint/no-unused-vars': 'off',
      // 强制缩进为 4 个空格，SwitchCase 缩进一级
      indent: ['error', 4, { SwitchCase: 1 }],
      // 强制 Vue 组件名使用多词命名（例如 MyComponent），但忽略 index 和 Header
      'vue/multi-word-component-names': [
        'error',
        { ignores: ['index', 'Header'] },
      ],
      // 关闭 TypeScript 禁止 require 的检查
      '@typescript-eslint/no-var-requires': 'off',
      // 关闭 TypeScript 禁止 any 类型的检查
      '@typescript-eslint/no-explicit-any': 'off',
      // 关闭分号检查，允许无分号
      semi: 'off',
      // 关闭 TypeScript 禁止 this 别名的检查
      '@typescript-eslint/no-this-alias': 'off',
      // 关闭 debugger 语句的检查
      'no-debugger': 'off',
      // 关闭 Vue 未使用变量的检查
      'vue/no-unused-vars': 'off',
      // 关闭 Vue 模板中变量遮蔽的检查
      'vue/no-template-shadow': 'off',
      // 关闭 Vue v-for 必须有 key 的检查
      'vue/require-v-for-key': 'off',
      // 关闭 Vue textarea 中使用 mustache 语法的检查
      'vue/no-textarea-mustache': 'off',
      // 关闭 Vue 禁止 v-html 的检查
      'vue/no-v-html': 'off',
      // 启用 Prettier 规则，强制代码符合 Prettier 的格式化要求
      'prettier/prettier': 'error',
    },
  },
]);

